<template>
  <div>
    <a-modal
      :width="820"
      title="打卡时间"
      :destroy-on-close="true"
      :visible="showCardTime"
      @cancel="$emit('handleTimeShow', false)"
      @ok="handleOk"
    >
      <a-form class="lab_l form_l">
        <!-- 适用聘用类型 -->
        <a-form-item>
          <div class="box">
            <div class="icon"><a-icon type="clock-circle" theme="filled" /> <span>当前打卡时间</span></div>
            <div class="time" v-for="(item, index) in timeList.periodList" :key="index">
              上班：{{ momentTime(item.startPeriod, "earliestPunchTime") }}-{{
                momentTime(item.startPeriod, "latestOnPunchTime")
              }}
              为正常上班打卡时间； 下班：{{ item.endPeriod }}-{{ momentTime(item.endPeriod, "latestPunchTime") }} 为正常下班打卡时间；
            </div>
          </div>
        </a-form-item>
        <a-form-item :colon="false" label="工作日：" :label-col="{ span: 3 }" :warpper-col="{ span: 16 }">
          <a-checkbox-group v-model="timeList.workWeekList" @change="onChange">
            <a-row type="flex" align="middle">
              <a-col><a-checkbox value="星期一">星期一</a-checkbox></a-col>
              <a-col><a-checkbox value="星期二">星期二</a-checkbox></a-col>
              <a-col><a-checkbox value="星期三">星期三</a-checkbox></a-col>
              <a-col><a-checkbox value="星期四">星期四</a-checkbox></a-col>
              <a-col><a-checkbox value="星期五">星期五</a-checkbox></a-col>
              <a-col><a-checkbox value="星期六">星期六</a-checkbox></a-col>
              <a-col><a-checkbox value="星期日">星期日</a-checkbox></a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <!-- 打卡时间 -->
        <a-form-item :colon="false" label="打卡时间：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
          <div v-for="(item, index) in timeList.periodList" :key="index">
            <a-row>
              <a-col v-if="index === 0">
                <span class="mg_r10">上班</span>
                <a-time-picker :value="moment(`${item.startPeriod}`, 'HH:mm')" format="HH:mm" :allow-clear="false" @change="onWorkChange" />
                -
                <span class="mg_r10 sub_tit">下班</span>
                <a-time-picker :value="moment(`${item.endPeriod}`, 'HH:mm')" format="HH:mm" :allow-clear="false" @change="onOffChange" />
                <a-icon
                  v-if="timeList.periodList.length < 2 && index === 0"
                  class="addIcon"
                  type="plus-circle"
                  style="font-size: 18px; margin-left: 10px"
                  @click="addWorkList"
                />
                <!-- <a-icon
                  v-if="timeList.periodList.length > 1 && index > 0"
                  class="deleteIcon"
                  type="delete"
                  style="font-size: 18px; margin-left: 10px"
                  @click="deleteNumList(item, index)"
                /> -->
              </a-col>
              <a-col v-if="index === 1">
                <span class="mg_r10">上班</span>
                <a-time-picker
                  :value="moment(`${item.startPeriod}`, 'HH:mm')"
                  format="HH:mm"
                  :allow-clear="false"
                  @change="onWorkChange2"
                />
                -
                <span class="mg_r10 sub_tit">下班</span>
                <a-time-picker :value="moment(`${item.endPeriod}`, 'HH:mm')" format="HH:mm" :allow-clear="false" @change="onOffChange2" />
                <!-- <a-icon
                  v-if="timeList.periodList.length < 2 && index === 0"
                  class="addIcon"
                  type="plus-circle"
                  style="font-size: 18px; margin-left: 10px"
                  @click="addWorkList"
                /> -->
                <a-icon
                  v-if="timeList.periodList.length > 1 && index > 0"
                  class="deleteIcon"
                  type="delete"
                  style="font-size: 18px; margin-left: 10px"
                  @click="deleteNumList(item, index)"
                />
              </a-col>
            </a-row>
          </div>

          <a-row>
            <a-checkbox v-model="timeList.periodList[0].hasRestPeriod">
              休息时间
            </a-checkbox>
            <span class="sub_tit">休息时间不算工作时长</span>
            <div v-if="timeList.periodList[0].hasRestPeriod">
              <span class="mg_r10">开始</span>
              <a-time-picker
                :default-value="moment('12:00', 'HH:mm')"
                format="HH:mm"
                :value="
                  timeList.restPeriod.startPeriod ? moment(`${timeList.restPeriod.startPeriod}`, 'HH:mm') : timeList.restPeriod.startPeriod
                "
                :allow-clear="false"
                @change="onRestChange"
              />
              -
              <span class="mg_r10 sub_tit">结束</span>
              <a-time-picker
                :default-value="moment('13:00', 'HH:mm')"
                format="HH:mm"
                :value="timeList.restPeriod.endPeriod ? moment(`${timeList.restPeriod.endPeriod}`, 'HH:mm') : timeList.restPeriod.endPeriod"
                :allow-clear="false"
                @change="offRestChange"
              />
            </div>
          </a-row>
        </a-form-item>

        <template>
          <!-- 打卡时间限制 -->
          <a-form-item :colon="false" label="打卡时间限制 " :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" class="primary_color">
            <a-row>
              <a-input-number
                style="width: 150px"
                v-model="timeList.earliestPunchTime"
                :min="0"
                :precision="0"
                :formatter="value => `${value}分钟`"
              />

              <!-- :parser="value => value.replace('分钟', '')" -->
              <!-- <a-select v-model="timeList.earliestPunchTime" style="width: 150px">
                <a-select-option value="180">上班前3小时内</a-select-option>
                <a-select-option value="120">上班前2小时内</a-select-option>
                <a-select-option value="60">上班前1小时内</a-select-option>
                <a-select-option value="30">上班前30分钟内</a-select-option>
                <a-select-option value="15">上班前15分钟内</a-select-option>
              </a-select> -->
              <span class="sub_tit mg_l10 mg_r10">最早上班打卡时间</span>
              <!-- <a-select v-model="timeList.earliestOffPunchTime" style="width: 150px">
                <a-select-option value="480">下班前8小时内</a-select-option>
                <a-select-option value="360">下班前6小时内</a-select-option>
                <a-select-option value="240">下班前4小时内</a-select-option>
                <a-select-option value="180">下班前3小时内</a-select-option>
                <a-select-option value="120">下班前2小时内</a-select-option>
                <a-select-option value="60">下班前1小时内</a-select-option>
              </a-select>
              <span class="sub_tit mg_l10">最早下班打卡时间</span> -->
            </a-row>
          </a-form-item>

          <a-form-item :colon="false" label="打卡时间限制 " :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" class="primary_color">
            <a-row>
              <a-input-number
                style="width: 150px"
                v-model="timeList.latestOnPunchTime"
                :min="0"
                :precision="0"
                :formatter="value => `${value}分钟`"
              />
              <!-- <a-select v-model="timeList.latestOnPunchTime" style="width: 150px">
                <a-select-option value="180">上班后3小时内</a-select-option>
                <a-select-option value="120">上班后2小时内</a-select-option>
                <a-select-option value="60">上班后1小时内</a-select-option>
                <a-select-option value="30">上班后30分钟内</a-select-option>
                <a-select-option value="15">上班后15分钟内</a-select-option>
              </a-select> -->
              <span class="sub_tit mg_l10 mg_r10">最晚上班打卡时间</span>
              <a-input-number
                style="width: 150px"
                v-model="timeList.latestPunchTime"
                :min="0"
                :precision="0"
                :formatter="value => `${value}分钟`"
              />
              <!-- <a-select v-model="timeList.latestPunchTime" style="width: 150px">
                <a-select-option value="480">下班后8小时内</a-select-option>
                <a-select-option value="360">下班后6小时内</a-select-option>
                <a-select-option value="240">下班后4小时内</a-select-option>
                <a-select-option value="180">下班后3小时内</a-select-option>
                <a-select-option value="120">下班后2小时内</a-select-option>
                <a-select-option value="60">下班后1小时内</a-select-option>
              </a-select> -->
              <span class="sub_tit mg_l10">最晚下班打卡时间</span>
            </a-row>
          </a-form-item>
        </template>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
const initTimeList = {
  periodList: [
    {
      startPeriod: "09:00",
      endPeriod: "18:00",
      type: true,
      sort: 0,
      hasRestPeriod: false
    }
  ],
  restPeriod: {
    startPeriod: "12:00",
    endPeriod: "13:00",
    type: false,
    sort: 0
  },
  afterWorkNeedPunch: true,
  earliestPunchTime: "15",
  earlyMinute: 1,
  isAllowLateLate: false,
  isAllowedLateEarly: false,
  lateMinute: 1,
  latestPunchTime: "60",
  offWorkLateMinute: 1,
  onWorkLateMinute: 1,
  workWeekList: ["星期一", "星期二", "星期三", "星期四", "星期五"],
  latestOnPunchTime: "15",
  earliestOffPunchTime: "60"
};
export default {
  props: {
    showCardTime: {
      type: Boolean,
      default: false
    },
    timeList: {
      type: Object,
      default: initTimeList
    },
    editIndex: {
      type: Number,
      default: -1
    },
    handleTimeList: {
      type: Function,
      default: () => {}
    },
    handleTimeShow: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      // editorIndex: null,
      // supers: false,
      // index: 0,
      // visible: false,
      // timeList: JSON.parse(JSON.stringify(initTimeList))
    };
  },

  methods: {
    // isHasRestPeriod() {
    //   if (this.timeList.periodList.length === 2) {
    //     this.timeList.periodList[1].hasRestPeriod = this.timeList.periodList[0].hasRestPeriod;
    //   }
    // },
    deleteNumList(item, index) {
      this.timeList.periodList.splice(index, 1);
    },
    addWorkList() {
      this.timeList.periodList.push({
        startPeriod: "09:00",
        endPeriod: "18:00",
        type: true,
        sort: 0,
        hasRestPeriod: false
      });
    },
    moment,
    momentTime(v, t) {
      if (t === "earliestPunchTime") {
        const seconds = this.timeList.earliestPunchTime * 60;
        const time = moment(v, "HH:mm").unix() - seconds;
        return moment(time * 1000).format("HH:mm");
      }
      if (t === "latestOnPunchTime") {
        const seconds = this.timeList.latestOnPunchTime * 60;
        const time = moment(v, "HH:mm").unix() + seconds;
        return moment(time * 1000).format("HH:mm");
      }
      if (t === "latestPunchTime") {
        const seconds = this.timeList.latestPunchTime * 60;
        const time = moment(v, "HH:mm").unix() + seconds;
        return moment(time * 1000).format("HH:mm");
      }
    },
    /* 确认 */
    handleOk() {
      this.$emit("handleTimeList", this.timeList, this.editIndex);
      this.$emit("handleTimeShow", false);
    },
    /*  */
    onChange(checkedValues) {},
    /* 上班时间 */
    onWorkChange(time, timeString) {
      if (timeString === "") return;
      if (timeString) this.timeList.periodList[0].startPeriod = timeString;
    },
    /* 下班时间 */
    onOffChange(time, timeString) {
      if (timeString === "") return;
      if (timeString) this.timeList.periodList[0].endPeriod = timeString;
    },
    onWorkChange2(time, timeString) {
      if (timeString === "") return;
      if (timeString) this.timeList.periodList[1].startPeriod = timeString;
    },
    /* 下班时间 */
    onOffChange2(time, timeString) {
      if (timeString === "") return;
      if (timeString) this.timeList.periodList[1].endPeriod = timeString;
    },
    /* 时间类型 */
    onRestChange(time, timeString) {
      if (timeString === "") return;
      this.timeList.restPeriod.startPeriod = timeString;
    },
    offRestChange(time, timeString) {
      if (timeString === "") return;
      this.timeList.restPeriod.endPeriod = timeString;
    }
  }
};
</script>
<style lang="scss" scoped>
.form_l {
  margin-left: 50px;
}
.box {
  width: 685px;
  min-height: 78px;
  background: var(--primary10);
  // background: rgba(var(--primary), 0.6);
  // background: rgba(107, 107, 242, 0.1);
  border-radius: 4px;
  padding: 18px;
  .icon {
    margin-left: 8px;
    line-height: 0;
  }
  .time {
    height: 20px;
    padding-left: 42px;
    margin-top: 10px;
    line-height: 20px;
  }
  i {
    font-size: 16px;
    color: var(--primary);
    margin: 0 14px 0 0;
  }
  span {
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
